<script>
  import dayjs from 'dayjs';
  import { calendar } from '@/sheep/components/s-better-calendar/calendar';
  import sheep from '@/sheep';

  export default {
    name: 'pcSolarTermFestival',
    data() {
      return {
        realTimeTime: '',
        // 今天的信息
        todayInfo: {},
        // 节日节气列表
        solarTermFestivalList: [],
      };
    },
    computed:{
      sq_image_path(){
        return sheep.$store('AI').sq_image_path;
      }
    },
    created() {
      this.getRealTimeTime();
      this.getSolarTermFestivalList();
      this.todayInfo = calendar.solar2lunar(dayjs(new Date().getTime()).format('YYYY'), dayjs(new Date().getTime()).format('MM'), dayjs(new Date().getTime()).format('DD'));
    },
    methods: {
      // 今天时间
      getRealTimeTime() {
        setInterval(() => {
          this.realTimeTime = dayjs(new Date().getTime()).format('YYYY年MM月DD日 HH:mm:ss');
        }, 100);
      },
      // 获取节日节气
      async getSolarTermFestivalList() {
        const { data } = await sheep.$api.surname.getFestivalList({
          search: '',
        });
        this.solarTermFestivalList = data;
      },
    },
  };
</script>

<template>
  <view class="flex-sub flex flex-column bg_FFFFFF"
        style="border-radius: 16rpx;overflow: hidden;font-family: Source Han Sans CN, Source Han Sans CN;">
    <view style="width: 100%;padding: 10px 0;border-bottom: 1px solid #E8E8E8"
          class="flex align-center justify-between">
      <view class="flex align-end" style="margin-left: 20px;">
        <view class="flex align-center">
          <view style="width: 4px;height: 18px;border-radius: 7px;background: #FF440A"></view>
          <view style="font-size: 28px;color: #363636;margin-left: 5px;white-space: nowrap" class="fw_500">
            节日节气
          </view>
        </view>
        <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
          {{ realTimeTime }}
        </view>
        <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
          {{ todayInfo.gzYear }}年{{ todayInfo.IMonthCn }}{{ todayInfo.IDayCn }}
        </view>
        <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
          {{ todayInfo.ncWeek }}
        </view>
        <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
          第{{ todayInfo.whichWeek }}周
        </view>
      </view>
    </view>
    <view class="flex-sub" style="position: relative">
      <scroll-view scroll-y="true" class="surnameList">
        <view class="listScroll"
          style="display: grid;grid-gap: 20rpx;margin-left: 20rpx;margin-right: 20rpx;padding: 20rpx 0">
          <view
            v-for="(item,index) in solarTermFestivalList"
            :key="index"
            class="flex align-center justify-around"
            @click.stop="selectFestivals(item)"
          >
            <view style="width: 100%;border-radius: 16rpx;padding: 32rpx 0;cursor:pointer;background: #B4D9E2;"
                  class="flex align-center justify-around"
            >
              <image :src="item.image_input" style="width: 99px;" mode="widthFix"></image>
              <view>
                <view
                  style="width:320rpx;font-size: 31px;color: #0295BD;font-weight: 500;text-overflow: ellipsis;overflow: hidden;white-space: nowrap">
                  {{ item.festival }}
                </view>
                <view style="font-size: 16px;color: #048EB6;font-weight: 500;">{{ item.time }}
                  {{ item.week_name }}
                </view>
                <view style="font-size: 16px;color: #048EB6;font-weight: 500;">
                  {{ item.lunar_time }}
                </view>
              </view>
              <view>
                <view class="flex align-center flex-column">
                  <view class="flex align-end"
                        v-if="item.day != 0 && item.day != '今天'">
                    <text style="font-size: 51px;color: #0295BD;font-weight: 500;line-height: 40px">{{ item.day
                      }}
                    </text>
                    <text style="font-size: 13px;color: #0295BD;font-weight: 500;margin-left: 5px;">天</text>
                  </view>
                  <view class="flex align-center" v-else>
                    <text style="font-size: 51px;color: #0295BD;font-weight: 500;line-height: 40px">今天</text>
                  </view>
                </view>
                <view style="margin-top: 10px;">
                  <view class="flex flex-row align-center justify-center"
                        style="width: 100px;padding: 5px 0;border-radius: 14px"
                        :style="{
                                  background: '#89CEE0 !important'
                                  }"
                  >
                    <image :src="`${sq_image_path}/chineseSurname/jiating_jierijieqiIcon.png`"
                           style="width: 15px;height: 15px;"></image>
                    <view style="margin-left: 4px;font-size: 12px;color: #FFFFFF;font-weight: 500;">
                      倒计时
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .surnameList {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .listScroll {
    grid-template-columns: repeat(3,1fr);
  }
  @media screen and (max-width: 1340px) {
    .listScroll {
      grid-template-columns: repeat(2,1fr);
    }
  }
</style>